import style from "@styles/whitelist/whitelist.module.less";

import { Form, Input, Select, Button } from "antd";
import React, { useState } from "react";
import { menus, filMenuFormWhite, resetdates } from "@actions/data";

import WhiteListLists from "@pages/whitelist/whitelistlist";
const { Option } = Select;

export default function WhitelistIndex() {
  const [form] = Form.useForm();
  const [formdate, setFormDate] = useState({});

  // 重置表单
  const onReset = () => {
    form.resetFields();
    setFormDate(resetdates(form.getFieldsValue()));
  };

  // values 提交form表单对象
  const onFinish = (values) => setFormDate(filMenuFormWhite(values));

  //errorInfo 提交form错误表单返回值
  const onFinishFailed = (errorInfo) => console.error("Failed:", errorInfo);

  return (
    <section className={style.whitelist}>
      <h1>抽奖白名单</h1>
      <ul className={"ul"}>
        <li>
          <Form
            form={form}
            layout="inline"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item name="activityName" label="活动名称：">
              <Input />
            </Form.Item>
            <Form.Item name="activityState" label="活动状态：">
              <Select style={{ width: "200px" }}>
                {menus.filter(v=>(v.id<=5)).map((v) => (
                  <Option key={v.id} value={v.id}>
                    {v.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item labelAlign="right">
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
              <Button type="primary" htmlType="reset" onClick={onReset}>
                重置
              </Button>
            </Form.Item>
          </Form>
        </li>
        <br />
        <li>
          <WhiteListLists formdate={formdate} />
        </li>
      </ul>
    </section>
  );
}
